<template>
    <div>
        <transition name="fade" 
        enter-active-class="animated swing" 
        leave-active-class="animated shake" 
        appear appear-active-class="animated swing"
        >
            <div v-show="show"><h1>HELLO WORLD</h1></div>
        </transition>
        <button @click="handleClick">TOOGLE</button>
        <button @click="addClick">ADD</button>
        <button @click="removeClick">REMOVE</button>
        <transition-group 
        enter-active-class="animated swing" 
        leave-active-class="animated shake" 
        >
            <div v-for="item of list" :key="item.id">
                <p>{{item.title}}</p>
            </div>
        </transition-group>
    </div>
</template>
<script>
export default {
    data: function () {
        return {
            show: true,
            list: []
        };
    },
    methods: {
        handleClick: function () {
            this.show = !this.show;
        },
        addClick: function () {
            this.list.push({
                id: this.list.length + 1,
                title: 'HELLO WORLD' + this.list.length + 1
            });
        },
        removeClick: function () {
            this.list.splice(this.list.length - 1, 1);
        }
    }
};
</script>
<style>

</style>

